import React from 'react'
import { observable } from 'mobx'
import { observer, Provider, inject } from 'mobx-react'
import { gen } from '../common/data-gen'
import { Buttons } from '../common/buttons.jsx'
import { Table } from '../common/table.jsx'

const DATA = gen()

class Store {
  @observable
  data = []
}

const store = new Store()

export default function App() {
  return (
    <Provider store={store}>
      <OneComponent />
    </Provider>
  )
}

const OneComponent = inject('store')(observer(MyComponent))

function MyComponent(props) {
  const store = props.store
  const update = () => {
    const data = store.data

    data[10].price = (Math.random() * 100).toFixed(2)
    data[1001].weight = (Math.random() * 100).toFixed(2)

    const next = [...data]
    store.data = next
  }
  return (
    <div>
      <div>
        <Buttons onRender={() => store.data = DATA} onUpdate={update} />
      </div>
      <div>
        <Table data={store.data} />
      </div>
    </div>
  )
}
